<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合练习1</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <!-- 1.先进行页面布局，放置一个复选框，一个下拉列表框 -->

        <input type="checkbox" v-model="agree">是否为会员{{agree}}
        <div v-if="agree">
        <select v-model="selectValue">
            <option value="钻石" >钻石会员</option>
            <option value="黄金" >黄金会员</option>
            <option value="白银" >白银会员</option>
        </select>
        尊贵的{{selectValue}}会员！！！
        </div><br>
        <div if-else>
            亲爱的用户，冲会员吗？
        </div>
        
        数量<input type="text" v-model.number="number"><br>
        单价<input type="text" v-model.number.lazy="price" @keydown.enter="visible=!visible">

        <div v-show="visible">
            尊敬的{{selectValue}},你购买的数量是{{number}},单价是{{price}}，折扣是{{zk}}，总价是{{rev}}
        </div>
    </div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                agree:false,
                selectValue:'顾客',
                number:'50',
                price:'100',
                
                visible:false,
            }
        },
        computed:{
            rev(){
               return this.number*this.price*this.zk
            },
            zk(){
                if(this.selectValue=='黄金')
                return 0.6
                if(this.selectValue=='白银')
                return 0.7
                if(this.selectValue=='钻石')
                return 0.8
                if(this.selectValue=='顾客')
                return 1

            }
        }




    }).mount("#app")
</script>
</html>